%gold {
  background-image: repeating-linear-gradient(135deg, rgb(255, 221, 155) 0, rgb(254, 215, 146) 20px, rgb(255, 225, 172) 40px, rgb(255, 255, 255) 70px, rgb(250, 198, 107) 125px, rgb(246, 194, 107) 160px, rgb(231, 177, 85) 175px, rgb(244, 193, 107) 185px, rgb(241, 191, 107) 220px, rgb(243, 190, 102) 235px, rgb(233, 177, 83) 250px, rgb(245, 190, 97) 280px, rgb(249, 188, 86) 305px, rgb(255, 251, 245) 385px, rgb(252, 195, 98) 415px, rgb(252, 195, 121) 450px, rgb(255, 221, 155) 500px);
  background-clip: text;
  background-repeat: repeat;
  background-size: 500px 500px;
  background-position: center center;
  -webkit-background-clip: text;
  // This effect is great, but broken in many browsers at this time
  // Re-enable for a fun shiny sheen on scroll!
  // background-attachment: fixed;
  color: rgb(255, 221, 155);
  -webkit-text-fill-color: transparent;
}

%scanlines {
  background-color: rgb(205, 205, 207);
  background-image: $gradient-scanlines;
  background-size: 1px 3px;
  box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 10px, inset 0 1px 1px rgba(0, 0, 0, 0.25);
  color: $color-off-black;
  text-shadow: none;

  strong, b, a {
    color: black;
  }
}

%spawnpoint {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: white 2px solid;
  line-height: 0;
  font-size: 10px;
  font-weight: bold;
  background: black;
  color: white;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.25),
    0 5px 2px 0 rgba(0, 0, 0, 0.25);
}

@keyframes selectionBox {
  0% { top: -5px; right: -5px; bottom: -5px; left: -5px; }
  100% { top: -2px; right: -2px; bottom: -2px; left: -2px; }
}

%selectionBox {
  &:before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    border: rgba(255, 255, 255, 0.01) 8px solid;
    border-image: url($baseurl + '/images/selection-box.svg') 8 8 8 8;
    border-image-width: 8px;
    animation: selectionBox 0.75s infinite;

    @media (prefers-reduced-motion) {
      animation: none;
    }
  }
}